<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理后台 - 粮食收购大数据平台</title>
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
        }
        .dashboard-container {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 250px;
            background: #304156;
            min-height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            transition: all 0.3s;
        }
        .sidebar.collapsed {
            width: 64px;
        }
        .sidebar-header {
            height: 60px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            background: #263445;
            color: white;
            font-size: 18px;
            font-weight: 600;
        }
        .sidebar.collapsed .sidebar-header {
            padding: 0 20px;
            justify-content: center;
        }
        .sidebar.collapsed .sidebar-title {
            display: none;
        }
        .main-layout {
            flex: 1;
            margin-left: 250px;
            transition: all 0.3s;
        }
        .main-layout.expanded {
            margin-left: 64px;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: relative;
            z-index: 1000;
            height: 60px;
            flex-shrink: 0;
        }
        .header-left {
            display: flex;
            align-items: center;
        }
        .logo {
            font-size: 20px;
            font-weight: 500;
            color: #4CAF50;
            margin-right: 30px;
        }
        .breadcrumb {
            color: #666;
        }
        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .main-content {
            padding: 20px;
            flex: 1;
            background: #f5f7fa;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .stat-info {
            flex: 1;
        }
        .stat-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }
        .stat-change {
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .stat-change.positive {
            color: #67C23A;
        }
        .stat-change.negative {
            color: #F56C6C;
        }
        .stat-icon {
            font-size: 32px;
            opacity: 0.8;
        }
        .menu-container {
            padding: 10px 0;
        }
        .menu-group {
            margin-bottom: 10px;
        }
        .menu-group-title {
            padding: 10px 20px;
            color: #bfcbd9;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .sidebar.collapsed .menu-group-title {
            display: none;
        }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: #bfcbd9;
            text-decoration: none;
            transition: all 0.3s;
            cursor: pointer;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }
        .menu-item:hover {
            background: #263445;
            color: #409EFF;
        }
        .menu-item.active {
            background: #409EFF;
            color: white;
        }
        .menu-item i {
            width: 20px;
            margin-right: 12px;
            text-align: center;
        }
        .sidebar.collapsed .menu-item {
            padding: 12px 22px;
            justify-content: center;
        }
        .sidebar.collapsed .menu-item span {
            display: none;
        }
        .content-area {
            flex: 1;
            background: #f5f7fa;
            min-height: calc(100vh - 60px);
        }
        .page-iframe {
            width: 100%;
            height: calc(100vh - 60px);
            border: none;
            background: white;
        }
        .toggle-btn {
            position: absolute;
            top: 15px;
            right: -15px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #409EFF;
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1001;
        }
        .charts-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        .chart-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .chart-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .chart-container {
            width: 100%;
            height: 300px;
        }
        .data-table-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .table-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
        .filters {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .permission-notice {
            background: #fff7e6;
            border: 1px solid #ffd591;
            border-radius: 6px;
            padding: 12px 16px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .permission-notice.admin {
            background: #f6ffed;
            border-color: #b7eb8f;
        }
        .permission-notice.government {
            background: #e6f7ff;
            border-color: #91d5ff;
        }
        .permission-notice.group {
            background: #fff2e8;
            border-color: #ffbb96;
        }
        .permission-notice.factory {
            background: #f9f0ff;
            border-color: #d3adf7;
        }
        @media (max-width: 768px) {
            .charts-grid {
                grid-template-columns: 1fr;
            }
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .header {
                padding: 0 10px;
            }
            .main-content {
                padding: 10px;
            }
            .filters {
                flex-direction: column;
                align-items: stretch;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="dashboard-container">
            <!-- 侧边栏 -->
            <div class="sidebar" :class="{ collapsed: sidebarCollapsed }">
                <div class="sidebar-header">
                    <i class="fas fa-seedling"></i>
                    <span class="sidebar-title" style="margin-left: 10px;">粮食收购平台</span>
                </div>
                
                <div class="menu-container">
                    <!-- 系统管理 -->
                    <div class="menu-group">
                        <div class="menu-group-title">系统管理</div>
                        <button class="menu-item" :class="{ active: currentPage === 'user-management' }" @click="navigateToPage('user-management')">
                            <i class="fas fa-users"></i>
                            <span>用户管理</span>
                        </button>
                        <button class="menu-item" :class="{ active: currentPage === 'role-management' }" @click="navigateToPage('role-management')">
                            <i class="fas fa-user-tag"></i>
                            <span>角色管理</span>
                        </button>
                        <button class="menu-item" :class="{ active: currentPage === 'menu-management' }" @click="navigateToPage('menu-management')">
                            <i class="fas fa-list"></i>
                            <span>菜单管理</span>
                        </button>
                        <button class="menu-item" :class="{ active: currentPage === 'permission-management' }" @click="navigateToPage('permission-management')">
                            <i class="fas fa-shield-alt"></i>
                            <span>权限管理</span>
                        </button>
                    </div>
                    
                    <!-- 组织管理 -->
                    <div class="menu-group">
                        <div class="menu-group-title">组织管理</div>
                        <button class="menu-item" :class="{ active: currentPage === 'province-management' }" @click="navigateToPage('province-management')">
                            <i class="fas fa-map"></i>
                            <span>省/兵团管理</span>
                        </button>
                        <button class="menu-item" :class="{ active: currentPage === 'city-management' }" @click="navigateToPage('city-management')">
                            <i class="fas fa-city"></i>
                            <span>市级管理</span>
                        </button>
                        <button class="menu-item" :class="{ active: currentPage === 'district-management' }" @click="navigateToPage('district-management')">
                            <i class="fas fa-building"></i>
                            <span>区县管理</span>
                        </button>
                        <button class="menu-item" :class="{ active: currentPage === 'town-management' }" @click="navigateToPage('town-management')">
                            <i class="fas fa-home"></i>
                            <span>乡镇管理</span>
                        </button>
                    </div>
                    
                    <!-- 业务管理 -->
                    <div class="menu-group">
                        <div class="menu-group-title">业务管理</div>
                        <button class="menu-item" :class="{ active: currentPage === 'group-management' }" @click="navigateToPage('group-management')">
                            <i class="fas fa-industry"></i>
                            <span>集团管理</span>
                        </button>
                        <button class="menu-item" :class="{ active: currentPage === 'factory-management' }" @click="navigateToPage('factory-management')">
                            <i class="fas fa-warehouse"></i>
                            <span>加工厂管理</span>
                        </button>
                        <button class="menu-item" :class="{ active: currentPage === 'farmer-management' }" @click="navigateToPage('farmer-management')">
                            <i class="fas fa-user"></i>
                            <span>农户管理</span>
                        </button>
                        <button class="menu-item" :class="{ active: currentPage === 'field-management' }" @click="navigateToPage('field-management')">
                            <i class="fas fa-seedling"></i>
                            <span>地块管理</span>
                        </button>
                    </div>
                    
                    <!-- 数据统计 -->
                    <div class="menu-group">
                        <div class="menu-group-title">数据统计</div>
                        <button class="menu-item" :class="{ active: currentPage === 'purchase-statistics' }" @click="navigateToPage('purchase-statistics')">
                            <i class="fas fa-chart-bar"></i>
                            <span>收购统计</span>
                        </button>
                        <button class="menu-item" :class="{ active: currentPage === 'sales-statistics' }" @click="navigateToPage('sales-statistics')">
                            <i class="fas fa-chart-line"></i>
                            <span>销售统计</span>
                        </button>
                        <button class="menu-item" :class="{ active: currentPage === 'inventory-statistics' }" @click="navigateToPage('inventory-statistics')">
                            <i class="fas fa-chart-pie"></i>
                            <span>库存统计</span>
                        </button>
                    </div>
                    
                    <!-- 数据概览 -->
                    <div class="menu-group">
                        <div class="menu-group-title">数据概览</div>
                        <button class="menu-item" :class="{ active: currentPage === 'dashboard' }" @click="navigateToPage('dashboard')">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>数据概览</span>
                        </button>
                    </div>
                </div>
                
                <!-- 折叠按钮 -->
                <button class="toggle-btn" @click="toggleSidebar">
                    <i :class="sidebarCollapsed ? 'fas fa-angle-right' : 'fas fa-angle-left'"></i>
                </button>
            </div>
            
            <!-- 主要内容区域 -->
            <div class="main-layout" :class="{ expanded: sidebarCollapsed }">
                <!-- 顶部导航 -->
                <div class="header">
                <div class="header-left">
                    <div class="logo"><i class="fas fa-seedling"></i> 粮食收购大数据平台</div>
                    <el-breadcrumb separator="/" class="breadcrumb">
                        <el-breadcrumb-item>管理后台</el-breadcrumb-item>
                        <el-breadcrumb-item>数据概览</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="header-right">
                    <el-button type="primary" size="small" @click="refreshData">
                        <el-icon><Refresh /></el-icon>
                        刷新数据
                    </el-button>
                    <div class="user-info">
                        <el-avatar :size="32" :src="userInfo.avatar">
                            <el-icon><User /></el-icon>
                        </el-avatar>
                        <span>{{ userInfo.name }}</span>
                        <el-dropdown @command="handleUserCommand">
                            <el-icon style="cursor: pointer;"><ArrowDown /></el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="profile">个人设置</el-dropdown-item>
                                    <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="content-area">
                <!-- 默认显示数据概览 -->
                <div v-if="currentPage === 'dashboard'" class="main-content">
                    <!-- 权限提示 -->
                    <div class="permission-notice" :class="userInfo.role">
                        <el-icon><InfoFilled /></el-icon>
                        <span>{{ getPermissionText() }}</span>
                    </div>

                    <!-- 统计卡片 -->
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-info">
                                <div class="stat-title">总收购量</div>
                                <div class="stat-value">{{ formatNumber(stats.totalAmount) }}</div>
                                <div class="stat-change positive">
                                    <el-icon><TrendCharts /></el-icon>
                                    <span>较上月 +12.5%</span>
                                </div>
                            </div>
                            <div class="stat-icon" style="color: #4CAF50;"><i class="fas fa-chart-bar"></i></div>
                        </div>
                        
                        <div class="stat-card">
                            <div class="stat-info">
                                <div class="stat-title">总交易额</div>
                                <div class="stat-value">¥{{ formatNumber(stats.totalValue) }}</div>
                                <div class="stat-change positive">
                                    <el-icon><TrendCharts /></el-icon>
                                    <span>较上月 +8.3%</span>
                                </div>
                            </div>
                            <div class="stat-icon" style="color: #FF9800;"><i class="fas fa-dollar-sign"></i></div>
                        </div>
                        
                        <div class="stat-card">
                            <div class="stat-info">
                                <div class="stat-title">收购企业</div>
                                <div class="stat-value">{{ stats.totalCompanies }}</div>
                                <div class="stat-change positive">
                                    <el-icon><TrendCharts /></el-icon>
                                    <span>较上月 +2</span>
                                </div>
                            </div>
                            <div class="stat-icon" style="color: #2196F3;"><i class="fas fa-industry"></i></div>
                        </div>
                        
                        <div class="stat-card">
                            <div class="stat-info">
                                <div class="stat-title">农户数量</div>
                                <div class="stat-value">{{ formatNumber(stats.totalFarmers) }}</div>
                                <div class="stat-change positive">
                                    <el-icon><TrendCharts /></el-icon>
                                    <span>较上月 +156</span>
                                </div>
                            </div>
                            <div class="stat-icon" style="color: #9C27B0;"><i class="fas fa-users"></i></div>
                        </div>
                    </div>

                    <!-- 图表区域 -->
                    <div class="charts-grid">
                        <!-- 收购趋势图 -->
                        <div class="chart-card">
                            <div class="chart-title">
                                <span><i class="fas fa-chart-line"></i> 收购趋势分析</span>
                                <el-select v-model="trendPeriod" size="small" style="width: 120px;">
                                    <el-option label="近7天" value="7d"></el-option>
                                    <el-option label="近30天" value="30d"></el-option>
                                    <el-option label="近3个月" value="3m"></el-option>
                                </el-select>
                            </div>
                            <div ref="trendChart" class="chart-container"></div>
                        </div>
                        
                        <!-- 粮食品种分布 -->
                        <div class="chart-card">
                            <div class="chart-title">
                                <span><i class="fas fa-seedling"></i> 粮食品种分布</span>
                            </div>
                            <div ref="grainChart" class="chart-container"></div>
                        </div>
                    </div>

                    <!-- 数据表格 -->
                    <div class="data-table-card">
                        <div class="table-header">
                            <div class="table-title"><i class="fas fa-clipboard-list"></i> 最近收购记录</div>
                            <div class="filters">
                                <el-select v-model="tableFilters.grainType" placeholder="粮食品种" size="small" clearable style="width: 120px;">
                                    <el-option label="小麦" value="小麦"></el-option>
                                    <el-option label="玉米" value="玉米"></el-option>
                                    <el-option label="大豆" value="大豆"></el-option>
                                    <el-option label="水稻" value="水稻"></el-option>
                                </el-select>
                                <el-select v-model="tableFilters.region" placeholder="地区" size="small" clearable style="width: 120px;">
                                    <el-option label="华北" value="华北"></el-option>
                                    <el-option label="华东" value="华东"></el-option>
                                    <el-option label="华南" value="华南"></el-option>
                                    <el-option label="西北" value="西北"></el-option>
                                </el-select>
                                <el-button type="primary" size="small" @click="searchTable">
                                    <el-icon><Search /></el-icon>
                                    查询
                                </el-button>
                                <el-button size="small" @click="exportData">
                                    <el-icon><Download /></el-icon>
                                    导出
                                </el-button>
                            </div>
                        </div>
                        
                        <el-table :data="tableData" stripe style="width: 100%" v-loading="tableLoading">
                            <el-table-column prop="date" label="收购日期" width="120" sortable></el-table-column>
                            <el-table-column prop="farmerName" label="农户姓名" width="100">
                                <template #default="scope">
                                    <span v-if="canViewPersonalInfo">{{ scope.row.farmerName }}</span>
                                    <span v-else>***</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="grainType" label="粮食品种" width="100"></el-table-column>
                            <el-table-column prop="amount" label="数量(公斤)" width="120" sortable>
                                <template #default="scope">
                                    {{ formatNumber(scope.row.amount) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="单价(元/公斤)" width="130" sortable>
                                <template #default="scope">
                                    ¥{{ scope.row.price.toFixed(2) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="totalValue" label="总价值(元)" width="130" sortable>
                                <template #default="scope">
                                    ¥{{ formatNumber(scope.row.totalValue) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="company" label="收购企业" min-width="150"></el-table-column>
                            <el-table-column prop="region" label="地区" width="100"></el-table-column>
                            <el-table-column label="操作" width="120" v-if="userInfo.role === 'admin'">
                                <template #default="scope">
                                    <el-button type="primary" size="small" @click="viewDetail(scope.row)">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        
                        <div style="margin-top: 20px; text-align: right;">
                            <el-pagination
                                v-model:current-page="pagination.currentPage"
                                v-model:page-size="pagination.pageSize"
                                :page-sizes="[10, 20, 50, 100]"
                                :total="pagination.total"
                                layout="total, sizes, prev, pager, next, jumper"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </div>
                
                <!-- iframe 容器用于加载其他页面 -->
                <iframe v-else :src="getPageUrl(currentPage)" class="page-iframe" frameborder="0"></iframe>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        createApp({
            data() {
                     return {
                         sidebarCollapsed: false,
                         currentPage: 'dashboard',
                         userInfo: {
                             username: '',
                             role: '',
                             avatar: ''
                         },
                    stats: {
                        totalAmount: 1250000,
                        totalValue: 3125000,
                        totalCompanies: 45,
                        totalFarmers: 8520
                    },
                    trendPeriod: '30d',
                    tableFilters: {
                        grainType: '',
                        region: ''
                    },
                    tableData: [],
                    tableLoading: false,
                    pagination: {
                        currentPage: 1,
                        pageSize: 20,
                        total: 0
                    },
                    trendChart: null,
                    grainChart: null
                }
            },
            computed: {
                canViewPersonalInfo() {
                    return ['admin', 'government'].includes(this.userInfo.role);
                }
            },
            methods: {
                // 获取权限说明文本
                getPermissionText() {
                    const texts = {
                        admin: '您拥有系统管理员权限，可以查看所有数据和进行系统管理操作',
                        government: '您拥有政府部门权限，可以查看辖区内所有收购数据和统计报表',
                        group: '您拥有集团公司权限，可以查看集团下属企业的收购数据',
                        factory: '您拥有收购企业权限，可以查看本企业的收购数据和业务统计'
                    };
                    return texts[this.userInfo.role] || '权限信息获取失败';
                },
                
                // 格式化数字
                formatNumber(num) {
                    return new Intl.NumberFormat('zh-CN').format(num);
                },
                
                // 刷新数据
                async refreshData() {
                    ElMessage.success('数据刷新成功');
                    await this.loadTableData();
                    this.updateCharts();
                },
                
                // 用户操作
                handleUserCommand(command) {
                    if (command === 'logout') {
                        ElMessageBox.confirm('确定要退出登录吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            localStorage.removeItem('userInfo');
                            ElMessage.success('已退出登录');
                            window.location.href = 'login.html';
                        });
                    } else if (command === 'profile') {
                        ElMessage.info('个人设置功能开发中...');
                    }
                },
                
                // 加载表格数据
                async loadTableData() {
                    this.tableLoading = true;
                    
                    try {
                        // 模拟API调用
                        await new Promise(resolve => setTimeout(resolve, 1000));
                        
                        // 根据角色生成不同的模拟数据
                        const mockData = this.generateMockData();
                        this.tableData = mockData.slice(
                            (this.pagination.currentPage - 1) * this.pagination.pageSize,
                            this.pagination.currentPage * this.pagination.pageSize
                        );
                        this.pagination.total = mockData.length;
                        
                    } catch (error) {
                        ElMessage.error('数据加载失败');
                    } finally {
                        this.tableLoading = false;
                    }
                },
                
                // 生成模拟数据
                generateMockData() {
                    const grainTypes = ['小麦', '玉米', '大豆', '水稻'];
                    const regions = ['华北', '华东', '华南', '西北'];
                    const companies = ['XX粮食收购站', 'YY农业合作社', 'ZZ粮食集团', 'AA收购公司'];
                    const farmers = ['张三', '李四', '王五', '赵六', '钱七', '孙八'];
                    
                    const data = [];
                    for (let i = 0; i < 100; i++) {
                        const amount = Math.floor(Math.random() * 1000) + 100;
                        const price = (Math.random() * 2 + 2).toFixed(2);
                        data.push({
                            id: i + 1,
                            date: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
                            farmerName: farmers[Math.floor(Math.random() * farmers.length)],
                            grainType: grainTypes[Math.floor(Math.random() * grainTypes.length)],
                            amount: amount,
                            price: parseFloat(price),
                            totalValue: amount * parseFloat(price),
                            company: companies[Math.floor(Math.random() * companies.length)],
                            region: regions[Math.floor(Math.random() * regions.length)]
                        });
                    }
                    
                    return data.sort((a, b) => new Date(b.date) - new Date(a.date));
                },
                
                // 表格查询
                searchTable() {
                    this.pagination.currentPage = 1;
                    this.loadTableData();
                },
                
                // 导出数据
                exportData() {
                    ElMessage.success('数据导出功能开发中...');
                },
                
                // 查看详情
                viewDetail(row) {
                    ElMessage.info(`查看记录 ${row.id} 的详细信息`);
                },
                
                // 分页处理
                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.loadTableData();
                },
                
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                    this.loadTableData();
                },
                
                // 初始化图表
                initCharts() {
                    this.initTrendChart();
                    this.initGrainChart();
                },
                
                // 初始化趋势图
                initTrendChart() {
                    this.trendChart = echarts.init(this.$refs.trendChart);
                    this.updateTrendChart();
                },
                
                // 更新趋势图
                updateTrendChart() {
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['收购量', '交易额']
                        },
                        xAxis: {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月']
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '收购量(万公斤)',
                                position: 'left'
                            },
                            {
                                type: 'value',
                                name: '交易额(万元)',
                                position: 'right'
                            }
                        ],
                        series: [
                            {
                                name: '收购量',
                                type: 'line',
                                data: [120, 132, 101, 134, 90, 230],
                                smooth: true,
                                itemStyle: { color: '#4CAF50' }
                            },
                            {
                                name: '交易额',
                                type: 'line',
                                yAxisIndex: 1,
                                data: [300, 330, 253, 335, 225, 575],
                                smooth: true,
                                itemStyle: { color: '#FF9800' }
                            }
                        ]
                    };
                    this.trendChart.setOption(option);
                },
                
                // 初始化粮食品种图
                initGrainChart() {
                    this.grainChart = echarts.init(this.$refs.grainChart);
                    const option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: '70%',
                                data: [
                                    { value: 35, name: '小麦', itemStyle: { color: '#4CAF50' } },
                                    { value: 28, name: '玉米', itemStyle: { color: '#FF9800' } },
                                    { value: 22, name: '大豆', itemStyle: { color: '#2196F3' } },
                                    { value: 15, name: '水稻', itemStyle: { color: '#9C27B0' } }
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    this.grainChart.setOption(option);
                },
                
                // 更新图表
                updateCharts() {
                    if (this.trendChart) {
                        this.updateTrendChart();
                    }
                    if (this.grainChart) {
                        this.grainChart.resize();
                    }
                },
                
                // 检查登录状态
                checkLoginStatus() {
                    const userInfo = localStorage.getItem('userInfo');
                    if (!userInfo) {
                        ElMessage.warning('请先登录');
                        window.location.href = 'login.html';
                        return false;
                    }
                    
                    this.userInfo = JSON.parse(userInfo);
                    return true;
                },
                
                // 切换侧边栏
                toggleSidebar() {
                    this.sidebarCollapsed = !this.sidebarCollapsed;
                },
                
                // 导航到页面
                navigateToPage(page) {
                    this.currentPage = page;
                },
                
                // 获取页面URL
                 getPageUrl(page) {
                     const pageUrls = {
                         'user-management': 'pages/user-management.html',
                         'role-management': 'pages/role-management.html',
                         'menu-management': 'pages/menu-management.html',
                         'permission-management': 'pages/permission-management.html',
                         'province-management': 'pages/province-management.html',
                         'city-management': 'pages/city-management.html',
                         'district-management': 'pages/district-management.html',
                         'town-management': 'pages/town-management.html',
                         'group-management': 'pages/group-management.html',
                         'factory-management': 'pages/factory-management.html',
                         'farmer-management': 'pages/farmer-management.html',
                         'field-management': 'pages/field-management.html',
                         'purchase-statistics': 'pages/purchase-statistics.html',
                         'sales-statistics': 'pages/sales-statistics.html',
                         'inventory-statistics': 'pages/inventory-statistics.html'
                     };
                     return pageUrls[page] || 'dashboard.html';
                 }
            },
            
            async mounted() {
                // 检查登录状态
                if (!this.checkLoginStatus()) {
                    return;
                }
                
                // 加载数据
                await this.loadTableData();
                
                // 初始化图表
                this.$nextTick(() => {
                    this.initCharts();
                });
                
                // 监听窗口大小变化
                window.addEventListener('resize', () => {
                    if (this.trendChart) this.trendChart.resize();
                    if (this.grainChart) this.grainChart.resize();
                });
            },
            
            beforeUnmount() {
                if (this.trendChart) this.trendChart.dispose();
                if (this.grainChart) this.grainChart.dispose();
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>